<template>
	<view class="all">
		<view class="forum" v-for="item in forums" :key="item.id">
			<image @click="toUser(item)" :src="$request.baseUrl + item.headimg" class="headimg"/>
			<view class="right">
				<view class="header">
					<view class="nickname">{{ item.nickname }}</view>
					<view class="more" @click="delForum(item)">
						<uni-icons type="more-filled" size="20"></uni-icons>
					</view>
				</view>
				<view class="content">{{ item.content }}</view>
				<view class="imgs" v-if="item.imgs.length > 0">
					<image v-for="(img, index) in item.imgs" :src="img" @click="previewImg(item.imgs, index)" mode="aspectFill"/>
				</view>
				<view class="time">{{ item.ftime }}</view>
			</view>
		</view>
		
		<uni-fab
			:pattern="pattern"
			:content="content"
			:horizontal="horizontal"
			:vertical="vertical"
			:direction="direction"
			@trigger="trigger"
		></uni-fab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				forums: [],
				type: 0,
				
				// 悬浮按钮
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#7A7E83',
					buttonColor: '#008676',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
					iconPath: '/static/published.png',
					selectedIconPath: '/static/published.png',
					text: '我的帖子',
					active: false
				}, {
					iconPath: '/static/publish.png',
					selectedIconPath: '/static/publish.png',
					text: '发布',
					active: false
				}]
			}
		},
		onLoad(option) {
			this.type = option.type == undefined ? -1 : option.type
		},
		onShow() {
			if (this.type == 0) {
				uni.setNavigationBarTitle({ title: '表白墙' })
			} else if (this.type == 1) {
				uni.setNavigationBarTitle({ title: '二手交易' })	
			} else if (this.type == 2) {
				uni.setNavigationBarTitle({ title: '寻物' })	
			} else {
				uni.setNavigationBarTitle({ title: '论坛' })
			}
			this.getForums(this.type);
		},
		onPullDownRefresh() {
			this.getForums(this.type);
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods: {
			// 获取论坛
			getForums(type, uid) {
				let that = this
				let url = '/mini/forum/list?type=' + type
				if (uid != undefined) {
					url += '&uid=' + uid
				}
				this.$request.get(url).then(res => {
					if (res.code === 200) {
						let forums = res.data
						for (let forum of forums) {
							if (forum.imgs != '') {
								let imgs = forum.imgs.split(',')
								imgs = imgs.map(function(item) {
									return that.$request.baseUrl + item 
								})
								forum.imgs = imgs
							}
						}
						this.forums = forums
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			// 删除论坛
			delForum(item) {
				if (item.uid == uni.getStorageSync('user').id) {
					uni.showModal({
						title: '提示',
						content: '确定删除这条帖子吗？',
						confirmColor: '#D43030',
						success: (res) => {
							if (res.confirm) {
								this.$request.get('/mini/forum/del?fid=' + item.id).then(res => {
									if (res.code === 200) {
										uni.setNavigationBarTitle({ title: '我的帖子' })
										this.getForums(-1, uni.getStorageSync('user').id)
									} else {
										uni.showToast({
											title: res.msg,
											duration: 2000,
											icon: 'none'
										})
									}
								})
							}
						}
					})
				}
			},
			// 图片预览
			previewImg(imgs, index) {
				uni.previewImage({
					urls: imgs,
					current: index
				});
			},
			toUser(item) {
				uni.navigateTo({
					url: '/pages/my/user?userId=' + item.uid
				})
			},
			// 悬浮按钮事件
			trigger(e) {
				if (e.index === 0) {
					uni.setNavigationBarTitle({ title: '我的帖子' })
					this.getForums(-1, uni.getStorageSync('user').id)
				} else {
					uni.navigateTo({
						url: '/pages/issue/issue?type=' + this.type
					})
				}
			}
		}
	}
</script>

<style scoped>
	.forum {
		width: 640rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.headimg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}
	
	.right {
		width: 520rpx;
	}
	.right .header {
		display: flex;
		justify-content: space-between;
	}
	.right .header .nickname {
		font-size: 30rpx;
		font-weight: 700;
		color: #183B06;
	}
	.right .content {
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	.right .imgs {
		display: flex;
		flex-wrap: wrap;
	}
	.right .imgs image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	.right .time {
		font-size: 25rpx;
		margin-top: 10rpx;
		color: #ccc;
	}
</style>
